<template>
  <view class="page">
    <!-- 头部背景 -->
    <view class="head-bg">
      <view class="" style="position: relative">
        <view style="padding: 60rpx 0 0 60rpx">
          <view class="commission-text">总收益(元) </view>
          <view class="commission-price">{{info.total_bonus}}</view>
        </view>
        <view style="position: absolute; right: 60rpx; top: 60rpx">
          <button class="btn">提现</button>
        </view>
        <view style="display: flex">
          <view style="padding: 50rpx 0 0 60rpx">
            <view class="commission-text">待入账佣金</view>
            <view class="commission-price">{{info.total_bonus}}</view>
          </view>
          <view style="padding: 50rpx 0 0 240rpx">
            <view class="commission-text">可提现佣金</view>
            <view class="commission-price">{{info.wait_withdrawal_amount}}</view>
          </view>
        </view>
      </view>
      <view class="bg">
        <image src="/static/integral_bg1.png" mode=""></image>
      </view>
    </view>

    <!-- 记录列表 -->
    <view class="record-list">
      <view class="list" v-for="(item, index) in list" :key="index">
        <view class="title-date">
          <view class="title">
            <text>{{ item.remark }}</text>
          </view>
          <view class="date" v-if="item.order_no">
            <text>订单号 : {{ item.order_no }}</text>
          </view>
        </view>
        <view class="integral">
          <text class="integral-price">+{{ item.commission }}</text>
          <text class="integral-time">{{ item.create_time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      list: [],
      has_more: [],
      page: 1,
    };
  },
  onLoad(options) {
    this.getAgentInfo();
    this.loadData();
  },
  methods: {
    async loadData() {
      const { data } = await this.$http.agent.commissionList();
      console.log(`data`, data);
      this.list = data.records;
      this.has_more = data.has_more;
    },
    async getAgentInfo() {
      const { data } = await this.$http.agent.getAgentInfo();
      this.info = data;
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.commission-text {
  font-size: 20;
  color: white;
}
.commission-price {
  font-size: 20;
  font-weight: 600;
  color: white;
}
.head-bg {
  position: relative;
  width: 100%;
  height: 300rpx;
  background: linear-gradient($base, $change-clor);
  .head-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    height: 100rpx;
    .user {
      display: flex;
      align-items: center;
      image {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;
      }
      text {
        font-size: 28rpx;
        color: #ffffff;
        margin-left: 20rpx;
      }
    }
    .exchange {
      display: flex;
      align-items: center;
      text {
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
  .wallet-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200rpx;
    .wallet {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text {
        font-size: 30rpx;
        color: #ffffff;
      }
      .number {
        font-size: 60rpx;
        margin-top: 10rpx;
        // font-weight: bold;
      }
    }
  }
  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 记录列表 */
.record-list {
  width: 100%;
  background-color: #ffffff;
  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    height: 140rpx;
    border-bottom: 2rpx solid #f6f6f6;
    .title-date {
      width: 70%;
      height: 100%;
      .title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60rpx;
        text {
          font-size: 28rpx;
          font-weight: bold;
          color: #222222;
        }
      }
      .date {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60rpx;
        text {
          font-size: 24rpx;
          color: #959595;
        }
      }
    }
    .integral {
      display: flex;
      align-items: center;
      flex-direction: column;
      .integral-price {
        font-size: 28rpx;
        font-weight: bold;
        color: $base;
      }
      .integral-time {
        font-size: 22rpx;
        font-weight: bold;
        color: $grey-clor;
      }
    }
  }
}
.btn {
  height: 66upx;
  line-height: 66upx;
  border-radius: 100upx;
  background: white;
  font-size: $font-base + 2upx;
  color: red;
}
</style>
